import React, { useEffect,useState } from 'react';
import ReactECharts from 'echarts-for-react';
import { $getTagNum} from "../../api/Demoapi";

const BarChart1 = () => {
    const [data,setData]=useState([]);
    const getTagNum=async ()=>{
        const response = await $getTagNum({});
        const result = Object.entries(response.data).map(([key, value]) => [value, key]);
        console.log(result);
        setData(result);
    }
    useEffect(()=>{
        getTagNum();
    },[])
    // 将你的 option 对象放在这里
    const option = {
        dataset: {
            source: [['amount', 'product'], ...data]
        },
        grid: { containLabel: true },
        xAxis: { name: 'amount' },
        yAxis: { type: 'category' },
        series: [
            {
                type: 'bar',
                encode: {
                    x: 'amount',
                    y: 'product'
                }
            }
        ]
    };

    return (
        <div style={{  width:'300px', height: '250px' }}>
            <ReactECharts option={option} />
        </div>
    );
};

export default BarChart1;